<template>
    <div class="dingxin">
        <el-card shadow="always">
            <div slot="header">
                <span :style="{ fontFamily: '微软雅黑', fontSize: '16px', fontWeight: 'bold' }">定薪模板</span>
            </div>
            <div class="card-middle" style="margin-bottom: 20px;">
                <el-button type="primary" size="default" @click="dialogVisible = true">新增</el-button>
            </div>
            <div class="card-body" v-for="item in tags" :key="item.id">
                <el-card shadow="always">
                    <div class="dingxin-header">
                        <div class="dingxin-header-left">
                            <div style="font-size: 20px;font-weight: bold;">{{ item.name }}</div>
                            <el-button type="warning" size="small" v-if="item.moren">默认</el-button>
                        </div>
                        <div class="dingxin-header-right">
                            <el-button type="text" style="font-size: large;" @click="show(item)">编辑</el-button>
                            <el-button type="text" size="default" style="color: #ff0101;font-size: large;"
                                @click="del(item)">删除</el-button>
                        </div>
                    </div>
                    <div class="dingxin-content">
                        <div class="dingxin-content-left">
                            <span style="font-size: 18px;">薪资项目:</span>
                        </div>
                        <div class="dingxin-content-right">
                            <el-tag type="info" v-for="item1, index in item.tablist" :key="index">{{ item1 }}</el-tag>
                        </div>
                    </div>
                </el-card>
            </div>
        </el-card>
        <!-- 新增 -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
            <el-form :model="addform" ref="addformref" :rules="addrules" label-width="100px">
                <el-form-item label="模板名称:" prop="name">
                    <el-input v-model="addform.name" size="small" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="薪资项目" prop="tablist">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="addform.tablist" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="新增" :visible.sync="dialogVisible1" width="30%">
            <el-form :model="editform" ref="editformref" :rules="editrules" label-width="100px">
                <el-form-item label="模板名称:" prop="name">
                    <el-input v-model="editform.name" size="small" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="薪资项目" prop="tablist">
                    <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1"
                        @change="handleCheckAllChange1">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="editform.tablist" @change="handleCheckedCitiesChange1">
                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
const cityOptions = ['基本工资', '岗位工资', '职务工资', '交通补贴', '住房补贴', '餐补', '高温津贴', '工龄津贴', '职务津贴', '夜班津贴', '通讯补贴', '节假日补贴', '员工慰问金', '差旅补贴', '绩效工资', '季度奖', '全勤奖', '推荐奖', '销售提成', '计时工资', '工龄工资', '司龄工资', '职称工资', '技能工资'];
export default {
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            addform: {
                name: '',
                moren: false,
                tablist: [],
            },
            editform: {
                id: '',
                name: '',
                moren: false,
                tablist: [],
            },
            addrules: {
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },

                ],
                tablist: [
                    { required: true, message: '请选择薪资项目', trigger: 'blur' },
                ]
            },
            editrules: {
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },

                ],
                tablist: [
                    { required: true, message: '请选择薪资项目', trigger: 'blur' },
                ]
            },
            checkAll: false,
            cities: cityOptions,
            isIndeterminate: true,
            checkAll1: false,
            isIndeterminate1: true,
            tags: [
                {
                    id: '1',
                    name: "模板一",
                    moren: true,
                    tablist: ['基本工资', '岗位工资', '职务工资', '交通补贴', '住房补贴', '餐补', '高温津贴', '工龄津贴', '职务津贴', '夜班津贴', '通讯补贴', '节假日补贴', '员工慰问金', '差旅补贴', '绩效工资', '季度奖', '全勤奖', '推荐奖', '销售提成', '计时工资', '工龄工资', '司龄工资', '职称工资', '技能工资']
                },
                {
                    id: '2',
                    name: "模板二",
                    moren: false,
                    tablist: ['基本工资', '岗位工资', '职务工资', '通讯补贴', '差旅补贴', '绩效工资', '季度奖', '全勤奖', '推荐奖', '销售提成', '计时工资', '工龄工资', '司龄工资', '职称工资', '技能工资']
                },
                {
                    id: '3',
                    name: "模板三",
                    moren: false,
                    tablist: ['基本工资', '岗位工资', '职务工资', '通讯补贴', '差旅补贴', '绩效工资', '季度奖', '全勤奖', '推荐奖', '销售提成', '计时工资', '工龄工资', '司龄工资', '职称工资', '技能工资']
                },
                {
                    id: '4',
                    name: "模板四",
                    moren: false,
                    tablist: ['基本工资', '岗位工资', '职务工资', '通讯补贴', '差旅补贴', '绩效工资', '季度奖', '全勤奖', '推荐奖', '销售提成', '计时工资', '工龄工资', '司龄工资', '职称工资', '技能工资']
                },
                {
                    id: '5',
                    name: "模板五",
                    moren: false,
                    tablist: ['基本工资', '岗位工资', '职务工资', '通讯补贴', '全勤奖', '推荐奖', '工龄工资', '司龄工资', '职称工资', '技能工资']
                },
            ]
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        handleCheckAllChange(val) {
            this.addform.tablist = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            this.addform.tablist = value
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        add() {
            this.dialogVisible = false
            this.tags.push({ id: Date.now(), ...this.addform })
            this.$refs.addformref.resetFields();
            this.checkAll = false
            this.isIndeterminate = true
        },
        handleCheckAllChange1(val) {
            this.editform.tablist = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange1(value) {
            this.editform.tablist = value
            console.log(this.editform);
            let checkedCount = value.length;
            this.checkAll1 = checkedCount === this.cities.length;
            this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.cities.length;
        },
        edit() {
            this.dialogVisible1 = false
            let idx = this.tags.findIndex(item => item.id == this.editform.id);
            this.tags[idx].tablist = this.editform.tablist
            this.$refs.editformref.resetFields();
            this.checkAll1 = false
            this.isIndeterminate1 = true
        },
        show(item) {
            this.dialogVisible1 = true
            this.editform = { ...item }
        },
        del(item) {
            if (item.moren) {
                this.$message.error('该模板已使用，不可删除!');
            } else {
                this.$confirm('该模板未使用，是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    let idx = this.tags.findIndex(item => item.id == this.editform.id);
                    this.tags.splice(idx, 1);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }

    }
};
</script>
<style lang='less'>
.dingxin {
    height: 100%;
    widows: 100%;
    box-sizing: border-box;

    .el-card {
        width: 100%;

        .card-body {
            width: 100%;
            margin-bottom: 15px;

            .dingxin-header {
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .dingxin-header-left {
                    width: 150px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }

            .dingxin-content {
                margin-top: 15px;
                display: flex;

                .dingxin-content-left {
                    width: 6%;
                    margin-top: 15px;
                }

                .dingxin-content-right {
                    width: 94%;
                    display: flex;
                    justify-content: baseline;
                    flex-wrap: wrap;
                    align-items: center;

                    .el-tag {
                        width: 8%;
                        text-align: center;
                        margin: 15px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>